<template>
  <div class="setting-content inside-comment">
    <h2 class="setting-header">
      <strong>回复审核</strong>
      <!-- <div class="right-num">
        <p @click="handleGetNotState">
          待审核：<span>{{ tableData?.length }}</span>
        </p>
      </div> -->
    </h2>

    <RuifoxTable
      :loading="tableLoading"
      :table-data="tableData"
      :field-list="fieldList"
      :default-index="true"
      :default-checkbox="true"
    >
      <template #default-checkbox="{ element }">
        <div class="table-div-check">
          <el-checkbox
            class="unmover"
            v-model="element.checked"
            @change="handleCheckTable(element.id)"
            size=""
          />
        </div>
      </template>

      <!-- 留言 -->
      <template #formName="{ element }">
        <span >{{element.formName ? element.formName : '-'}}</span>
      </template>
      <!-- 分类  -->
      <template #typeName="{ element }">
        <span v-if="!element.typeName" style="color: #444;margin-left: 5px;">—</span>
      </template>

      <!-- 创建时间列 -->
      <template #publishTime="{ element }">
        {{ dayjs(element.publishTime).format("YYYY-MM-DD HH:mm:ss") }}
      </template>

      <!-- 审核状态列 -->
      <template #state="{ element }">
        <div>
          <el-tag v-if="element.state == 3" type="warning">待审核</el-tag>
          <el-tag v-if="element.state == 1" type="success">审核通过</el-tag>
          <el-tag v-if="element.state == 0" type="danger">审核失败</el-tag>
          <span v-if="element.state == 99" style="color: #444; margin-left: 5px"
            >—</span
          >
        </div>
      </template>

      <!-- 公开状态列 -->
      <template #isOpen="{ element }">
        <el-switch
          v-model="element.isOpen"
          :active-value="1"
          :inactive-value="0"
          :before-change="() => handleOpen(element)"
        />
      </template>

      <!-- 回复时间列 -->
      <template #replyTime="{ element }">
        {{ dayjs(element.publish_time).format("YYYY-MM-DD HH:mm:ss") }}
      </template>

      <!-- 操作列 -->
      <template #options="{ element }">
        <div class="table-td-option unmover">
          <el-button
            type="primary"
            size="small"
            link
            @click="showDetail(element)"
            >审核</el-button
          >
        </div>
      </template>
    </RuifoxTable>
    <PaginationView
      :total="queryData.total"
      :pageSize="queryData.pageSize"
      :currentPage="queryData.currentPage"
      :allChoose="isAllChooseBtn"
      :pageChoose="isPageChooseBtn"
      :options="batchOptions"
      :checkedNum="checkedNum"
      :canChoose="queryData.total > 0"
      @changeSize="handleSizeChange"
      @currentChange="handleCurrentChange"
      @changePageChoose="handlePageChoose"
      @changeAllChoose="handleAllChoose"
      @invertChoose="handleInvertChoose"
      @checkOption="handleBatchOptions"
      @refreshList="handleGetFormManageList"
      @cancelChoose="handleResetPagination"
      v-if="tableData.length > 0"
    />
    <!-- 详情 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="留言详情"
      width="900px"
      class="comment-detail-dialog"
    >
      <el-scrollbar height="600px">
        <div class="comment-detail">
          <div class="main-comment">
            <!-- 留言信息 -->
            <div class="comment-info">
              <span class="label">留言内容：</span>
            </div>
            <!-- 分割线 -->
            <el-divider style="margin-bottom: 15px" />
            <!-- 留言内容 -->
            <FormRenderer
              :fields="currentDetail.comment.content"
              :model-value="{}"
              disabled
              label-width="100px"
            />
          </div>
          <!-- 回复内容 -->
          <div class="reply-item">
            <div class="reply-info">
              <div class="left">
                <span class="username"
                  >回复人：{{ currentDetail.user_name }}</span
                >
                <span class="time"
                  >回复时间：{{
                    dayjs(currentDetail.publishTime).format(
                      "YYYY-MM-DD HH:mm:ss"
                    )
                  }}</span
                >
              </div>
              <div class="right">
                <div class="reply-actions">
                  <el-tag v-if="currentDetail.state == 3" type="warning"
                    >待审核</el-tag
                  >
                  <el-tag v-if="currentDetail.state == 1" type="success"
                    >审核通过</el-tag
                  >
                  <el-tag v-if="currentDetail.state == 0" type="danger"
                    >审核失败</el-tag
                  >
                  <!-- <el-button
                    type="primary"
                    link
                    @click="auditReplay(currentDetail)"
                    >审核</el-button
                  > -->
                  <el-button
                    v-permission="['flow:task:cc:process']"
                    type="primary"
                    size="small"
                    link
                    @click="handleAuditProgress(currentDetail.process_instance_id)"
                    >审核进度</el-button
                  >
                </div>
              </div>
            </div>
            <el-divider />
            <div
              class="reply-content"
              v-html="currentDetail.content"
            ></div>
            <el-divider />
          </div>
          <!-- 审核内容 -->
          <div class="audit-content">
            <div class="comment-info">
              <span class="label">审核：</span>
            </div>
            <!-- 分割线 -->
            <el-divider style="margin-bottom: 15px" />
            <el-form :model="auditReplayForm" label-width="70px" >
              <el-form-item label="审核结果" prop="approvalResult" :rules="auditReplayForm.approvalResult != '' ? [{ required: true, message: `请选择审核结果`, trigger: 'blur' }] : []">
                <el-radio-group v-model="auditReplayForm.approvalResult">
                  <el-radio
                    v-for="option in auditOption"
                    :key="option.value"
                    :label="option.value"
                    >{{ option.label }}</el-radio
                  >
                </el-radio-group>
              </el-form-item>
              <el-form-item label="审核意见" prop="comment">
                <el-input
                  placeholder="输入审核意见"
                  v-model="auditReplayForm.comment"
                ></el-input>
              </el-form-item>
            </el-form>
            <div class="dialog-footer">
              <el-button @click="detailDialogVisible = false">取消</el-button>
              <el-button type="primary" @click="auditReplayFormSubmit"
                >确认</el-button
              >
            </div>
          </div>
        </div>
      </el-scrollbar>
    </el-dialog>
    <el-dialog
      v-model="showAuditProgress"
      title="审核进度"
      width="600px"
      class="process-dialog"
    >
      <AuditProgress v-if="showAuditProgress" :id="processInstanceId" />
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, onBeforeMount } from "vue";
import {
  selectAuditingPagecommentMessages,
  auditcommentMessages,
} from "@/api/audit";
import { useStore } from "vuex";
import AuditProgress from "../components/AuditProgress";
import { tableList as mixTable } from "@ruifox-cms/utils";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
import FormRenderer from "../components/FormRenderer";


//获取用户信息
const store = useStore();

const userInfo = ref();
userInfo.value = store.state.base.userInfo;

const {
  queryData,
  tableData: oriTableData,
  tableLoading,
  checkedNum,
  isAllChooseBtn,
  isPageChooseBtn,
  // getTableData,
  //   handleSearch,
  handleCurrentChange,
  handleSizeChange,
  handlePageChoose,
  handleAllChoose,
  handleInvertChoose,
  handleCheckTable,
  handleResetPagination,
} = mixTable({
  getListApi: selectAuditingPagecommentMessages,
});
const defaultQuery = reactive({
  total: 10,
  currentPage: 1,
  pageSize: 10,
});

Object.assign(queryData, defaultQuery);
const tableData = ref([]);

// 获取待审核数据
const handleGetFormManageList = async () => {
  try {
    let res = await selectAuditingPagecommentMessages(queryData);
    oriTableData.value = res.data.list;
    tableData.value = res.data.list;
    queryData.total = res.data.total;
  } catch (error) {
    ElMessage.error("获取数据失败", error);
  }
};

//待审核
// getTableData();
const auditReplayForm = ref({
  id: "",
  comment: "",
  approvalResult: "",
  variableMap: {
    workflowMqTagId: "comment",
    submit_user_id: userInfo.value.id
  }
});
// 添加详情相关的数据和方法
const detailDialogVisible = ref(false);
const currentDetail = ref({});
const showDetail = async (row) => {
  currentDetail.value = row;
  // console.log(currentDetail.value);
  detailDialogVisible.value = true;
  auditReplayForm.value.id = row.process_task_id;
};

// 通过单选
const auditOption = ref([
  { label: "通过", value: "approved" },
  { label: "拒绝", value: "rejected" },
  { label: "回退", value: "rollback" },
]);
//审核

const auditReplayFormSubmit = async () => {
  if (auditReplayForm.value.approvalResult == "") {
    ElMessage.error("请选择审核结果");
    return
  } else if (auditReplayForm.value.approvalResult == 'rejected' && auditReplayForm.value.comment == '') {
    ElMessage.error("请填写审核意见");
    return
  }
  const res = await auditcommentMessages(auditReplayForm.value);
  console.log(res);
  if (res.code === 20000) {
    ElMessage.success("审核成功");
    auditReplayForm.value.comment = "";
    auditReplayForm.value.approvalResult = "";
    detailDialogVisible.value = false;
    handleGetFormManageList();
  } else {
    ElMessage.error("获取回复失败");
  }
};

// 审核进度
const showAuditProgress = ref(false);
const processInstanceId = ref("");
const handleAuditProgress = async (data) => {
  processInstanceId.value = data;
  showAuditProgress.value = true;
};

// 表格显示字段
const fieldList = ref([
  {
    title: "回复内容（点击查看详情）",
    name: "content",
    width: 200,
  },
  {
    title: "回复人",
    name: "user_name",
  },
  // {
  //   title: "留言ip",
  //   name: "ip",
  // },
  // {
  //   title: "留言时间",
  //   name: "publishTime",
  // },
  {
    title: "所属留言",
    name: "formName",
  },
  {
    title: "所属分类",
    name: "typeName",
  },
  // {
  //   title: "回复状态",
  //   name: "isReply",
  //   visible: true
  // },
  {
    title: "审核状态",
    name: "state",
    visible: true,
  },
  {
    title: "是否公开",
    name: "isOpen",
    visible: true,
  },
  {
    title: "回复时间",
    name: "replyTime",
  },
  {
    title: "操作",
    name: "options",
    width: 150,
    fixed: "right",
  },
]);

onMounted(async () => {
  await handleGetFormManageList();
});
onBeforeMount(async () => {
  await store.dispatch('flow/getOperator') 
})
</script>
<style scoped lang="scss">
/* .setting-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .right-num {
    display: flex;
    justify-content: end;
    p {
      font-size: 14px;
      padding: 6.5px 11px;
      color: var(--el-input-text-color, var(--el-text-color-regular));
      border-radius: var(
        --el-input-border-radius,
        var(--el-border-radius-base)
      );
      box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
        inset;
      margin-left: 10px;
      cursor: pointer;
      span {
        font-size: 18px;
        color: #333;
      }
    }
  }
} */
.comment-detail {
  .comment-header {
    margin-bottom: 16px;

    .header-title {
      font-size: 18px;
      font-weight: 500;
      color: #303133;
    }
  }
  .comment-info {
      margin:  0 0 12px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .info-item {
        width: 48%;
        display: flex;
        align-items: center;
        margin-bottom: 8px;

        &:last-child {
          margin-bottom: 0;
          width: 100%;
        }

        .label {
          color: #606266;
          margin-right: 8px;
          min-width: 70px;
        }

        .value {
          color: #303133;
        }
      }
    }
  .main-comment {
    padding: 16px;
    margin-bottom: 20px;
    border: 1px solid #e4e7ed;
    border-radius: 4px;

    .comment-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;

      .left {
        display: flex;
        align-items: center;

        .label {
          color: #606266;
          margin-right: 8px;
        }

        .value {
          color: #303133;
        }
      }

      .right {
        display: flex;
        align-items: center;
        gap: 16px;
        button {
          font-size: 14px;
        }
      }
    }

    

    .comment-content {
      padding: 12px 0;

      :deep(*) {
        font-size: 14px !important;
        line-height: 1.6;
      }

      :deep(img) {
        max-width: 100%;
        height: auto;
      }
    }
  }
  .reply-item {
    padding: 16px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    margin-bottom: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    background: #fff;
    transition: box-shadow 0.3s ease;

    &:hover {
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
    }

    &:last-child {
      margin-bottom: 5px;
    }

    .reply-info {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;

      .left {
        display: flex;
        align-items: center;
        gap: 24px;

        .username {
          color: #303133;
          font-size: 14px;
        }

        .time {
          color: #909399;
          font-size: 14px;
        }
      }
      .right {
        button {
          font-size: 14px;
          margin-left: 15px;
        }
      }
    }

    .el-divider {
      margin: 12px 0;
      border-top: 1px solid #f0f0f0;
    }

    .reply-content {
      :deep(*) {
        font-size: 14px !important;
        line-height: 1.6;
      }

      :deep(img) {
        max-width: 100%;
        height: auto;
      }
    }
    .audit-progress {
      margin-top: 10px;
      .audit-title {
        font-size: 16px;
        color: #333;
      }
      .audit-list {
        display: flex;
        margin-top: 10px;
        .audit-item {
          flex: 1;
          position: relative;
          &::after {
            position: absolute;
            left: 0;
            top: 10px;
            z-index: 1;
            content: "";
            height: 1px;
            width: 100%;
            background: #dddddd;
          }
          &:last-child {
            &::after {
              display: none;
            }
          }
          i {
            font-size: 20px;
            position: relative;
            z-index: 3;
          }
          p {
            margin-top: 5px;
            &.username {
              display: flex;
              align-items: center;
              i {
                margin-left: 10px;
                font-size: 18px;
              }
            }
          }
        }
      }
    }
  }
  .audit-content{
    padding: 16px;
    margin-bottom: 20px;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    .dialog-footer{
      display: flex;
      justify-content: end;
    }
  }
}
.el-radio{
  margin-right: 20px;
}
.content-text {
  cursor: pointer;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; 
  white-space: normal; 
  font-size: 12px !important;
  max-height: 36px;
  &:hover {
    color: $mainColor;
  }
}
.content-text ::v-deep * {
  font-size: 12px !important;
  background: none !important;
}
</style>
